<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>品牌介绍 - 中空领航</title>
    <!-- 添加ECharts库 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.3/echarts.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
        }
        
        body {
            background-color: #fff9e6;
            color: #333;
            line-height: 1.5;
            overflow-x: hidden;
        }
        
        /* 主题颜色 */
        :root {
            --primary-color: #0B3D91; /* 深蓝色主题 */
            --secondary-color: #4A90E2; /* 天蓝色 */
            --accent-color: #FFD700; /* 金色点缀 */
            --light-color: #FFFFFF;
            --dark-color: #1A1A1A;
            --gray-color: #F0F2F5;
            --red-color: #0B3D91; /* 修改红色为主题蓝色 */
            --warning-color: #FF3B30; /* 警告红色 */
        }
        
        /* 顶部导航栏 */
        .header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 10;
            height: 44px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #fff9e6;
            box-shadow: 0 1px 2px rgba(0,0,0,0.1);
        }
        
        .back-button {
            position: absolute;
            left: 10px;
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .header-title {
            font-size: 18px;
            font-weight: bold;
        }
        
        .header-subtitle {
            position: absolute;
            right: 15px;
            font-size: 14px;
            color: #666;
        }
        
        /* 主体内容 */
        .container {
            padding-top: 44px;
            padding-bottom: 80px;
        }
        
        /* 建筑场景 */
        .building-scene {
            position: relative;
            width: 100%;
            height: 240px;
            overflow: hidden;
            background-image: linear-gradient(to bottom, #2e64ea, #4a90e2);
        }
        
        .building {
            width: 100%;
            height: 100%;
            background-image: url('https://pan.feiwow.com/raw/files/17b90398-8f34-4509-952d-79cb8dbdff07-1749241617399.png');
            background-size: contain;
            background-position: center;
            background-repeat: no-repeat;
        }
        
        /* 内容卡片 */
        .card {
            background-color: white;
            border-radius: 12px;
            margin: 15px;
            padding: 15px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        
        /* 奖池卡片 */
        .bonus-card {
            background-color: #fff8e1;
            border-radius: 12px;
            margin: -40px 15px 15px;
            padding: 15px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            position: relative;
            overflow: hidden;
            z-index: 2;
        }
        
        .bonus-title {
            text-align: center;
            font-size: 14px;
            color: #8d6e63;
            margin-bottom: 10px;
            position: relative;
        }
        
        .bonus-title::before,
        .bonus-title::after {
            content: "⭐";
            margin: 0 5px;
            color: var(--accent-color);
            font-size: 12px;
        }
        
        .bonus-amount {
            text-align: center;
            font-size: 28px;
            font-weight: bold;
            color: #000;
            margin-bottom: 10px;
        }
        
        .bonus-stats {
            display: flex;
            justify-content: center;
            background-color: rgba(255,236,179,0.5);
            padding: 8px;
            border-radius: 8px;
            margin-top: 10px;
        }
        
        .bonus-stat {
            text-align: center;
            font-size: 12px;
            color: #8d6e63;
            padding: 0 15px;
        }
        
        .bonus-stat-value {
            color: var(--warning-color);
            font-weight: bold;
        }
        
        /* 数据卡片 */
        .data-card {
            margin-top: 15px;
        }
        
        .data-title {
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 15px;
        }
        
        .data-stats {
            display: flex;
            justify-content: space-between;
            margin-bottom: 15px;
        }
        
        .data-stat {
            text-align: center;
            flex: 1;
        }
        
        .data-value {
            font-size: 20px;
            font-weight: bold;
            margin-bottom: 5px;
        }
        
        .data-label {
            font-size: 14px;
            color: #666;
        }
        
        /* 股价走势图 */
        .chart-container {
            height: 180px;
            margin-top: 20px;
            position: relative;
            border-radius: 8px;
            overflow: hidden;
            background-color: #f5f7fa;
        }
        
        .chart-label {
            position: absolute;
            bottom: 10px;
            right: 10px;
            font-size: 12px;
            color: var(--warning-color);
            background-color: rgba(255,255,255,0.8);
            padding: 3px 8px;
            border-radius: 10px;
            z-index: 2;
        }
        
        .chart {
            width: 100%;
            height: 100%;
            position: relative;
        }
        
        /* 股神卡片 */
        .top-holder {
            display: flex;
            align-items: center;
            padding: 15px 0;
            border-bottom: 1px solid #f0f0f0;
        }
        
        .holder-avatar {
            width: 50px;
            height: 50px;
            border-radius: 25px;
            overflow: hidden;
            margin-right: 15px;
            background-color: #e0e0e0;
        }
        
        .holder-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .holder-info {
            flex: 1;
        }
        
        .holder-name {
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 5px;
        }
        
        .holder-stats {
            display: flex;
            font-size: 13px;
            color: #666;
        }
        
        .holder-stat {
            margin-right: 15px;
        }
        
        .holder-value {
            color: var(--warning-color);
            font-weight: bold;
        }
        
        .ranking {
            display: flex;
            align-items: center;
            font-size: 12px;
            color: #999;
        }
        
        .ranking-icon {
            margin-left: 3px;
            font-size: 18px;
        }
        
        /* 产品卡片 */
        .products {
            display: flex;
            overflow-x: auto;
            padding: 10px 0;
            -webkit-overflow-scrolling: touch;
        }
        
        .products::-webkit-scrollbar {
            display: none;
        }
        
        .product {
            flex: 0 0 auto;
            width: 110px;
            margin-right: 15px;
            text-align: center;
        }
        
        .product-image {
            width: 100px;
            height: 100px;
            border-radius: 8px;
            background-color: #f0f0f0;
            margin-bottom: 8px;
            overflow: hidden;
        }
        
        .product-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .product-name {
            font-size: 12px;
            color: #666;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        
        .product-status {
            font-size: 12px;
            color: #999;
            margin-top: 5px;
        }
        
        /* 底部操作按钮 */
        .actions {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            display: flex;
            padding: 10px 15px;
            background-color: white;
            box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
        }
        
        .action-button {
            flex: 1;
            height: 44px;
            margin: 0 5px;
            border-radius: 22px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            font-weight: bold;
        }
        
        .video-button {
            background-color: #333;
            color: white;
        }
        
        .shop-button {
            background-color: #FF3B30;
            color: white;
        }
        
        .action-button .material-icons {
            margin-right: 5px;
        }
        
        /* 图标字体 (使用Material Icons) */
        @font-face {
            font-family: 'Material Icons';
            font-style: normal;
            font-weight: 400;
            src: url(https://fonts.gstatic.com/s/materialicons/v139/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
        }
        
        .material-icons {
            font-family: 'Material Icons';
            font-weight: normal;
            font-style: normal;
            font-size: 24px;
            line-height: 1;
            letter-spacing: normal;
            text-transform: none;
            display: inline-block;
            white-space: nowrap;
            word-wrap: normal;
            direction: ltr;
            -webkit-font-feature-settings: 'liga';
            -webkit-font-smoothing: antialiased;
        }
    </style>
</head>
<body>
    <!-- 顶部导航栏 -->
    <div class="header">
        <a href="airplane.html" class="back-button">
            <span class="material-icons">arrow_back</span>
        </a>
        <div class="header-title">VitaGrow</div>
        <div class="header-subtitle">项目介绍</div>
    </div>
    
    <!-- 主内容区 -->
    <div class="container">
        <!-- 建筑场景 -->
        <div class="building-scene">
            <div class="building"></div>
        </div>
        
        <!-- 奖池卡片 -->
        <div class="bonus-card">
            <div class="bonus-title">分红奖池</div>
            <div class="bonus-amount">¥13.8679323187</div>
            <div class="bonus-stats">
                <div class="bonus-stat">
                    该品牌总股数
                    <div class="bonus-stat-value">4409.320股</div>
                </div>
            </div>
        </div>
        
        <!-- 实时数据 -->
        <div class="card data-card">
            <div class="data-title">实时数据</div>
            <div class="data-stats">
                <div class="data-stat">
                    <div class="data-value">0单</div>
                    <div class="data-label">本月销量</div>
                </div>
                <div class="data-stat">
                    <div class="data-value">0.00314514708元</div>
                    <div class="data-label">今日股价</div>
                </div>
            </div>
            
            <div class="data-title">股价走势</div>
            <div class="chart-container">
                <div class="chart" id="stockChart"></div>
                <div class="chart-label">累计上涨0%</div>
            </div>
        </div>
        
        <!-- 品牌股神 -->
        <div class="card">
            <div class="data-title">
                品牌股神
                <span class="ranking">
                    排行榜
                    <span class="material-icons ranking-icon">chevron_right</span>
                </span>
            </div>
            
            <div class="top-holder">
                <div class="holder-avatar">
                    <img src="https://picsum.photos/200/200" alt="用户头像">
                </div>
                <div class="holder-info">
                    <div class="holder-name">墨yyds</div>
                    <div class="holder-stats">
                        <div class="holder-stat">
                            持有该品牌<span class="holder-value">1.55022%</span>股份
                        </div>
                    </div>
                    <div class="holder-stats">
                        <div class="holder-stat">
                            累计邀请好友<span class="holder-value">453</span>人
                        </div>
                    </div>
                    <div class="holder-stats">
                        <div class="holder-stat">
                            持有的股份价值<span class="holder-value">0.21</span>元
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 造煤款商品 -->
        <div class="card">
            <div class="data-title">
                造款商品
                <span class="ranking">
                    全部
                    <span class="material-icons ranking-icon">chevron_right</span>
                </span>
            </div>
            
            <div class="products">
                <div class="product">
                    <div class="product-image">
                        <img src="https://picsum.photos/200/200?random=1" alt="商品1">
                    </div>
                    <div class="product-name">最新款饮品</div>
                    <div class="product-status">待上架</div>
                </div>
                <div class="product">
                    <div class="product-image">
                        <img src="https://picsum.photos/200/200?random=2" alt="商品2">
                    </div>
                    <div class="product-name">最新款饮品</div>
                    <div class="product-status">待上架</div>
                </div>
                <div class="product">
                    <div class="product-image">
                        <img src="https://picsum.photos/200/200?random=3" alt="商品3">
                    </div>
                    <div class="product-name">最新款饮品</div>
                    <div class="product-status">待上架</div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 底部操作按钮 -->
    <div class="actions">
        <div class="action-button video-button">
            <span class="material-icons">play_circle_filled</span>
            看视频打造
        </div>
        <div class="action-button shop-button">
            <span class="material-icons">shopping_cart</span>
            购物打造
        </div>
    </div>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 从URL获取品牌名称参数
            const urlParams = new URLSearchParams(window.location.search);
            const brandName = urlParams.get('brand') || 'VitaGrow'; // 默认值为VitaGrow
            
            // 设置页面标题
            document.querySelector('.header-title').textContent = brandName;
            document.title = `${brandName} - 中空领航`;
            
            // 返回按钮点击事件
            document.querySelector('.back-button').addEventListener('click', function(e) {
                e.preventDefault();
                window.history.back();
            });
            
            // 底部按钮点击效果
            const actionButtons = document.querySelectorAll('.action-button');
            
            actionButtons.forEach(btn => {
                btn.addEventListener('click', function() {
                    this.style.opacity = '0.8';
                    setTimeout(() => {
                        this.style.opacity = '1';
                    }, 200);
                });
            });
            
            // 使用ECharts绘制股价走势图
            function drawChart() {
                // 初始化ECharts实例
                const chartDom = document.getElementById('stockChart');
                const myChart = echarts.init(chartDom);
                
                // 指定图表的配置项和数据
                const option = {
                    grid: {
                        top: 10,
                        right: 10,
                        bottom: 20,
                        left: 40
                    },
                    xAxis: {
                        type: 'category',
                        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                        axisLine: {
                            lineStyle: {
                                color: '#ccc'
                            }
                        },
                        axisLabel: {
                            fontSize: 10,
                            color: '#666'
                        }
                    },
                    yAxis: {
                        type: 'value',
                        splitLine: {
                            lineStyle: {
                                color: '#f0f0f0'
                            }
                        },
                        axisLabel: {
                            fontSize: 10,
                            color: '#666',
                            formatter: '{value}元'
                        }
                    },
                    series: [
                        {
                            data: [0.00310, 0.00305, 0.00320, 0.00315, 0.00340, 0.00325, 0.00315],
                            type: 'line',
                            smooth: true,
                            lineStyle: {
                                color: '#FF3B30',
                                width: 2
                            },
                            symbol: 'circle',
                            symbolSize: 6,
                            itemStyle: {
                                color: '#FF3B30'
                            },
                            areaStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    {
                                        offset: 0,
                                        color: 'rgba(255, 59, 48, 0.3)'
                                    },
                                    {
                                        offset: 1,
                                        color: 'rgba(255, 59, 48, 0.1)'
                                    }
                                ])
                            }
                        }
                    ],
                    tooltip: {
                        trigger: 'axis',
                        formatter: '{b}: {c}元',
                        backgroundColor: 'rgba(255,255,255,0.8)',
                        textStyle: {
                            color: '#333'
                        },
                        borderColor: '#ccc',
                        borderWidth: 1
                    }
                };
                
                // 使用配置项设置图表
                myChart.setOption(option);
                
                // 自适应窗口大小
                window.addEventListener('resize', function() {
                    myChart.resize();
                });
            }
            
            drawChart();
            
            // 初始化引导系统
            setTimeout(() => {
                // 产品信息页面引导步骤配置
                const productGuideSteps = [
                    {
                        target: '.building-scene',
                        title: '品牌建筑',
                        content: '这是品牌的实体建筑展示，随着品牌发展会不断升级。',
                        position: 'bottom'
                    },
                    {
                        target: '.bonus-card',
                        title: '分红奖池',
                        content: '这里展示品牌的分红奖池金额和总股数，作为股东可以获得相应分红。',
                        position: 'bottom'
                    },
                    {
                        target: '.chart-container',
                        title: '股价走势',
                        content: '这里展示品牌股价的实时走势图，帮助您做出投资决策。',
                        position: 'top'
                    },
                    {
                        target: '.top-holder',
                        title: '品牌股神',
                        content: '这里展示品牌的顶级股东信息，包括持股比例和价值。',
                        position: 'bottom'
                    },
                    {
                        target: '.products',
                        title: '品牌商品',
                        content: '这里展示品牌相关的商品信息，左右滑动可以查看更多商品。',
                        position: 'top'
                    },
                    {
                        target: '.actions',
                        title: '参与方式',
                        content: '您可以通过观看视频或购物的方式参与品牌建设，获取股份。',
                        position: 'top'
                    }
                ];
                
                // 如果引导系统已加载，则初始化
                if (typeof guideSystem !== 'undefined') {
                    guideSystem.init('productInfo', productGuideSteps);
                }
            }, 1000);
        });
    </script>
    
    <!-- 引入引导系统脚本 -->
    <script src="guide.js"></script>
</body>
</html>